// 1. ------------------------- 获取成绩数据并展示 ---------------------------
axios.get('/score/list').then(result => {
    // console.log(result.data);
    let { code, data } = result.data;
    // console.log(data);
    if (code === 0) {
        let trs = ``;
        // 循环遍历，不断的去拼接tr
        for (let key in data) {
            // key 就是对象的键，即学员id    
            // data[key]表示 {name: '张三', score: [33, 44, 55, 66, 77]}
            trs += `
        <tr>
          <th scope="row">${key}</th>
          <td>${data[key].name}</td>
          <td class="score"data-id="${key}" data-batch="1">${data[key].score[0]}</td>
          <td class="score"data-id="${key}" data-batch="2">${data[key].score[1]}</td>
          <td class="score"data-id="${key}" data-batch="3">${data[key].score[2]}</td>
          <td class="score"data-id="${key}" data-batch="4">${data[key].score[3]}</td>
          <td class="score"data-id="${key}" data-batch="5">${data[key].score[4]}</td>
        </tr>
        `;
        }
        // 循环结束，把所有的tr放到tbody中
        $('tbody').html(trs);
    }
});

// 2. ------------------------- 可以编辑的表格效果 ---------------------------
$('tbody').on('click', '.score', function () {
    let td = $(this)
    // 判断如果td里面有input了就不创建了
    if (td.children().length > 0) return;
    // 获取td里面的数值
    let text = td.text()
    // 清空td
    td.empty();
    // 创建input
    let input = $(`<input type='text'/>`)
    input.val(text)
    input.css({
        height: '100%',
        width: '100%',
        background: td.css('background'), // 取td的背景色
        border: '0 none',
        outline: 'none',
        textAlign: 'center'
    })
    // 把input放到td里
    input.appendTo(td)
    // 获取焦点
    input.trigger('focus')
    // input失去焦点事件，表示取消修改或取消录入。把原来单元格中的分数填回去即可
    input.on('blur', function () {
        td.text(text)
    })
    input.on('keyup', function (e) {
        if (e.key == 'Enter') {
            let data = {
                stu_id: $(this).parent().data('id'), // $(this) 是 input
                batch: $(this).parent().data('batch'),
                score: $(this).val(), // 分数就是当前input中的值
            }

            axios.post('/score/entry', data).then(result => {
                let { code, message } = result.data
                if (code == 0) {
                    toastr.success(message); // 修改或录入成功，提示
                    td.text(data.score); // 把新改的分数，放到td中

                }
            })

        }


    })
})